<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			.img1{
				width: 400px;
				transition: 2s allow-discrete;
				@starting-style {
					opacity: 0;
				}
			}

			.img2 {
				display: block;
				transition: 1s allow-discrete;
				position: relative;
				left: var(--left);
				width: var(--width);
			}
			.img2-hide{
				display: none;
				width: 0px;
				left: 1000px;
			}
			@starting-style {
				.img2{
					width: 200px;
					left: 1000px;
				}
			}
			
		</style>
	</head>
	<body>
		<h3>@starting-style dom 初始化时的起始动画位置</h3>
		<h3>allow-discrete</h3>

		<button onclick="showImg1()">111111111</button>
		<br>
		<img class="img1" src="../canvas图片/01/img/a.jpg" />
		<hr>

		
		<button onclick="showImg2()">img2 toggle</button>
		<pre>
			img2 {
				transition: 0.5s allow-discrete;
			}
			@starting-style {
				.img2{
					width: 200px;
					left: 1000px;
				}
			}
			只能监听 非内联样式 ，写在标签上的样式类型无效。可以通过修改 class 或者 变量
		</pre>

		<br>
		<img class="img2" style="--width: 600px; --left: 0px" src="../canvas图片/01/img/a.jpg" />
		<hr>
	</body>
</html>
<script>
	function showImg1() {
		let e = document.querySelector('.img1')
		console.log( e.style.opacity );
		if(e.style.opacity == '1') {
			e.style.opacity = 0
		} else {
			e.style.opacity = 1
		}
	}

	function showImg2() {
		let e = document.querySelector('.img2');
		if( ![...e.classList].includes('img2-hide') ) {
			e.classList.add('img2-hide');
		} else {
			e.classList.remove('img2-hide');
		}

	}
</script>
<!-- if( e.style.getPropertyValue('--width') == '600px' ) {
	e.style.setProperty('--width', '200px');
	e.style.setProperty('--left', '1000px');
	e.style.display = 'none';
} else {
	e.style.setProperty('--width', '600px');
	e.style.setProperty('--left', '0px');
	e.style.display = 'block';
} -->
